THEOplayer + Google Analytics で動画の再生回数などをリアルタイムで取得してみた

動画の再生回数、サクッと取得してみませんか

#Google Analytics

#THEOplayer

大前諒祐

2020.09.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、大前です。

動画配信を行う際、再生回数を取得したい といった要望を受けた経験はありませんでしょうか。

今回は、動画プレイヤー製品である THEOplayer に Google Analytics を組み合わせて、動画の再生回数などを取得してみました。

再生回数などを取得する仕組みを自前で用意しようとするとそれなりに大変ですが、SaaS サービスなどを組み合わせる事により、簡単に実現する事が出来ます。

やってみた

THEOplayer で動画プレイヤーの作成

まずは THEOplayer を使用し、動画プレイヤー（SDK）を作成します。

動画プレイヤーの作成は以下ブログに従って行いますので、手順は省略します。

今回は最低限の再生機能のみをもつ、以下の HTML を生成しました。

ライセンスキーの部分だけ置き換えれば、そのままご利用いただけるはずです。

作成した HTML ファイルは S3 に配置しておきます。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>THEOplayer 2.X: Getting Started</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- THEOplayer library and css -->
    <script type="text/javascript" src="https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/THEOplayer.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/ui.css" />
</head>

<body>

    <div class="theoplayer-container video-js theoplayer-skin vjs-16-9"></div>

    <script>
        var element = document.querySelector(".theoplayer-container");
        var player = new THEOplayer.Player(element, {
            libraryLocation: "https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx"
        });

        // Customized video player parameters
        player.source = {
            sources: [{
                "src": "https://cdn.theoplayer.com/video/elephants-dream/playlist-single-audio.m3u8",
                "type": "application/x-mpegurl"
            }]
        };

        player.preload = 'auto';
    </script>
</body>

</html>

Google Analytics の設定

続いて、Google Analytics の設定を行なっていきます。

アカウント作成

アカウントを持っていなかったので、作成するところから始めます。

アカウント名を入力し、他はデフォルトで進みます。

今回はウェブサイトで検証するので、"ウェブ" を選択。

「ウェブサイトの URL」には作成した HTML ファイルの配置先を指定します。今回は S3 に配置しているため、S3 の URL を指定しました。

その他、レポートのタイムゾーンなどを設定したらアカウントの作成は完了です。

トラッキングタグの埋め込み

先ほど作成した HTML ファイルに Google Analytics のトラッキングタグを埋め込んでいきます。

まず、Google Analytics のアカウント作成後に表示される（表示されていない場合は管理画面 → トラッキング情報）トラッキング ID をメモします。

THEOplayer の公式ドキュメントに従い、コードを埋め込んで行きます。

Custom Analytics Integration

まず、head タグ内に以下コードを記載します。UA-XXXXXX-X には先ほど確認した ID を記載してください。

これにより、サイトのビュー数などが Google Analytics で確認できる様になります。

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-XXXXXX-X', 'auto');
    ga('send', 'pageview');
</script>

今回は動画の再生回数を取得したいので、動画プレイヤーに関するイベントが発生した際に Google Analytics にイベントを送信するスクリプトを追加します。

必要に応じて設定するイベントは調整してください。

player.addEventListener(['durationchange', 'stalled', 'ended', 'seeking', 'seeked', 'waiting', 'playing', 'pause', 'volumechange'],
function(event) {
    ga('send', {
        hitType: 'event',
        eventCategory: 'video',
        eventAction: event.type,
        eventLabel: player.src,
        eventValue: Math.floor(player.currentTime)
    });
});

最終的な HTML は以下になりました。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>THEOplayer 2.X: Getting Started</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- THEOplayer library and css -->
    <script type="text/javascript" src="https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/THEOplayer.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/ui.css" />

    <!-- Google Analytics -->
    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-XXXXXX-X', 'auto');
        ga('send', 'pageview');
    </script>
    <!-- End Google Analytics -->
</head>

<body>

    <div class="theoplayer-container video-js theoplayer-skin vjs-16-9"></div>

    <script>
        var element = document.querySelector(".theoplayer-container");
        var player = new THEOplayer.Player(element, {
            libraryLocation: "https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx"
        });

        // Customized video player parameters
        player.source = {
            sources: [{
                "src": "https://cdn.theoplayer.com/video/elephants-dream/playlist-single-audio.m3u8",
                "type": "application/x-mpegurl"
            }]
        };

        player.preload = 'auto';

        player.addEventListener(['durationchange', 'stalled', 'ended', 'seeking', 'seeked', 'waiting', 'playing', 'pause', 'volumechange'],
        function(event) {
            ga('send', {
                hitType: 'event',
                eventCategory: 'video',
                eventAction: event.type,
                eventLabel: player.src,
                eventValue: Math.floor(player.currentTime)
            });
        });
    </script>
</body>

</html>